<div
  class="outer-container"
  (click)="songClicked()"
  (mouseover)="isHovering = true"
  (mouseleave)="isHovering = false"
  [ngStyle]="{'background-color': isSelected ? 'rgba(0, 0, 0, 0.3)' : ''}"
  [style.padding-right.px]="(queueView && !isHovering) ? '10' : ''"
  *ngIf="isReleased && isSong"
>
  <div class="inner-container">
    <div class="rank" *ngIf="rank">{{rank}}</div>
    <div class="track-number" *ngIf="albumView">{{songData.attributes.trackNumber}}</div>
    <img class="album-cover" *ngIf="!albumView" appLazyLoad [src]="songData.attributes.artwork.url | formatArtworkUrl:40" alt="album-art">
    <div class="track-info">
      <div class="song-name-container">
          <span class="song-name" [ngStyle]="{'color': isSelected ? '#69f0ae' : ''}">{{songData.attributes.name}}</span>
          <mat-icon *ngIf="songData.attributes.contentRating === 'explicit'" class="explicit">explicit</mat-icon>
      </div>
      <div class="secondary-info" *ngIf="!albumView">
        <span class="artist-name">
          {{songData.attributes.artistName}}&nbsp;&nbsp;•&nbsp;&nbsp;{{songData.attributes.albumName}}
        </span>
      </div>
    </div>

    <button
      class="more-button"
      aria-label="More"
      mat-icon-button
      *ngIf="!queueView"
      [matMenuTriggerFor]="menu"
      (click)="isAction = true; $event.stopPropagation()"
      [style.visibility]="(isHovering || isAction) ? 'visible' : 'hidden'"
    >
      <mat-icon>more_vert</mat-icon>
    </button>

    <button
      aria-label="Remove"
      class="remove-button"
      mat-icon-button
      *ngIf="queueView && isHovering"
      [disableRipple]="true"
      (click)="uponRemove.emit()"
    >
      <mat-icon>remove_circle_outline</mat-icon>
    </button>

    <mat-menu #menu="matMenu" (closed)="isAction = false">
      <button aria-label="Play next" mat-menu-item (click)="playNext()">Play Next</button>
      <button aria-label="Play later" mat-menu-item (click)="playLater()">Play Later</button>
    </mat-menu>

    <div
      *ngIf="!queueView"
      class="time"
      [ngStyle]="{'color': isSelected ? '#69f0ae' : ''}"
    >
      {{songData.attributes.durationInMillis | formatMilliseconds}}
    </div>
  </div>
</div>
